/*
* @Author: xuhongling
* @Date:   2023-08-25 15:27:34
* @Last Modified by:   xuhongling
* @Last Modified time: 2024-02-01 10:48:02
*/
import { Hformat, HArrayFormat } from '@/hooks/web/useHQPFormat';
// ECharts Option
const setChartOption = (chartData, processTable) => {
  let time = 0;
  let inz = 0;
  const inzArr: any = [];

  if (processTable && processTable.length) {
    time = processTable[0].tmMin
    inz = processTable[0].z
  }
  for (let i = 0; i < chartData.nzbs.length; i++) {
    inzArr.push(inz);
  }

  const chartOption = {
    color: ['#a78e5d', '#26b8f4', '#F0B10E', '#5470c6', '#ee6666', '#3ba272'],
    grid: {
      top: '90',
      left: '34',
      right: '80',
      bottom: '14',
      containLabel: true
    },
    legend: {
      left: "center",
      top: "44",
      itemWidth: 20,
      data: [
        {
          name: '断面数据',
          itemWidth: 24,
          itemHeight: 14,
          itemStyle: {
            color: '#a78e5d'
          }
        }, {
          name: '当前水位',
          itemWidth: 24,
          itemHeight: 14,
          itemStyle: {
            color: '#26b8f4'
          }
        }
      ]
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: chartData.dis,
      position: 'left',
      name: '起点距(cm)',
      axisLine: {
        onZero: false,
        lineStyle: {
          type: 'solid',
          color: '#333'
        }
      },
      axisTick: {
        show: true,
        inside: true,
        interval: 'auto',
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        show: true,
        margin: 14,
        textStyle: {
          color: "#333",
          fontSize: 12,
        },
      }
    },
    yAxis: [
      {
        type: 'value',
        position: 'left',
        name: '河道高程(m)',
        scale: true,
        splitNumber: 5,
        boundaryGap: ['0', '5%'],
        nameTextStyle: {
          color: '#333'
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#333'
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#333",
            fontSize: 12,
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#f4f4f4'
          }
        },
      }
    ],
    series: [
      {
        name: '断面数据',
        type: 'line',
        yAxisIndex: 0,
        // zlevel: 1,
        showSymbol: false,
        connectNulls: true, //是否连接空数据
        smooth: true,
        areaStyle: {
          opacity: 1,
          color: '#a78e5d',
        },
        lineStyle: {
          width: 1,
          color: '#a78e5d',
        },
        emphasis: {
          focus: 'series'
        },
        data: HArrayFormat(chartData.nzbs),
      }, {
        name: '当前水位',
        type: 'line',
        yAxisIndex: 0,
        zlevel: -1,
        showSymbol: false,
        connectNulls: true, //是否连接空数据
        areaStyle: {
          opacity: 0.6,
          color: '#26b8f4',
        },
        lineStyle: {
          width: 1,
          color: '#26b8f4',
        },
        emphasis: {
          focus: 'series'
        },
        markPoint: {
          symbol: 'rect',
          symbolSize: [40, 20],
          symbolOffset: [0, -14],
          data: [
            {
              type: 'average',
              name: '当前水位',
              x: '50%',
              label: {
                color: '#1ea8e1',
                align: 'center',
                verticalAlign: 'middle',
                lineHeight: 14,
                formatter: () => {
                  return `当前水位：${Hformat(inz)}m\n${time}`
                }
              },
              itemStyle: {
                color: "transparent"
              },
            },
          ],
        },
        data: inzArr
      }
    ],
  }
  return chartOption;
}

export default setChartOption
